import React from "react";
import classNames from "classnames";
import './style.less';

export interface ButtonOptions {
    icon?: string;
    onClick?: () => void;
    shape?: 'default' | 'outlined' | 'text';
    type?: 'primary' | 'default' | 'success' | 'warning' | 'danger';
    size?: 'small' | 'middle' | 'large';
    loading?: boolean;
    disabled?: boolean;
    arrow?: boolean;
    style?: React.CSSProperties;
    className?: string;
    children?: React.ReactNode;
}

export default class Button extends React.Component<ButtonOptions, any>{
    static defaultProps = {
        shape: 'default',
        type: 'default',
        size: 'middle',
        loading: false,
        disabled: false,
        arrow: false,
    }
    constructor(props: ButtonOptions) {
        super(props);
        this.state = {};
    }
    render() {
        const {
            icon, onClick, shape, type, size, arrow, style, className, children, disabled, loading
        } = this.props;
        const classes = classNames({
            'r-btn': true,
            [`r-btn-${size}`]: size,
            [`r-btn-${shape}-${type}`]: shape && type,
            'r-btn-arrow': arrow,
            [`${className}`]: className,
        })
        return (
            <button disabled={disabled || loading} className={classes} onClick={onClick} style={style}>
                <span>
                    {loading &&
                        <i className="r-icon-loading" />
                    }
                    {icon &&
                        <i className={icon} />
                    }
                    {children}
                </span>
            </button>
        )
    }
}